<template>
  <div class="m-view-block">
    <h2>{{$t('home.blockTitle')}}</h2>
    <div class="block-area table-shadow">
      <div class="block-item flex-between" v-for="(item,index) in blockList" :key="index">
        <router-link
          :to="{path:'/blockdetail',query:{height:item.height}}"
          class="height-box"
        >{{item.height}}</router-link>
        <div class="detail">
          <p>
            <span>{{$t('home.txCount')}}</span>
          </p>
          <p>
            <span class="light txcount">{{item.txs.length}}</span>
          </p>
        </div>
        <div class="detail time-box">
          <p>
            <span class="txcount">{{$t('home.time')}}</span>
          </p>
          <p>
            <count class="count-down grey" :time="item.blockTime"></count>
          </p>
        </div>
      </div>
      <div class="viewall-btn">
        <router-link to="/block">{{$t('home.viewAll')}}</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import blockBase from "@/mixins/Home/blockList.js";
import Count from "@/components/Count.vue";
export default {
  mixins: [blockBase],
  components: {
    Count
  }
};
</script>

<style lang="scss" scoped>
.m-view-block {
  h2 {
    padding: 20px 0 20px 12px;
    font-size: 14px;
    font-family: PingFangSC-Semibold;
    font-weight: 500;
    color: $black;
    line-height: 20px;
  }
  .block-area {
    background: $white;
    .block-item {
      height: 100px;
      padding: 20px;
      border-bottom: 1px solid $border;
      .height-box {
        height: 51px;
        min-width: 75px;
        padding: 0 10px;
        line-height: 51px;
        text-align: center;
        color: $white;
        font-size: 14px;
        background: $blue;
        border-radius: 2px;
      }
      .detail {
        // margin-left: 85px;
        color: $black;
        font-size: 12px;
        line-height: 25px;
        p {
          text-align: center;
        }
        .txcount {
          display: inline-block;
          min-width: 50px;
          // margin-right: 10px;
          text-align: center;
        }
        .mine {
          display: inline-block;
          min-width: 50px;
          margin-right: 10px;
        }
        .grey {
          color: $grey;
        }
      }
      .time-box {
        width: 110px;
      }
    }
    .viewall-btn {
      font-size: 12px;
      // font-family: PingFangSC-Semibold;
      height: 54px;
      padding: 12px;
      a {
        display: inline-block;
        width: 100%;
        height: 100%;
        line-height: 30px;
        text-align: center;
        // color: $orange;
        color: #3498db;
        background: rgba(52, 152, 219, 0.1);
        border-radius: 4px;
        transition: 0.3s;
      }
      a:hover {
        color: #fff;
        background: #3498db;
        box-shadow: 0 0 20px rgba(52, 152, 219, 0.2);
      }
    }
  }
}
</style>